<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        html, body{
            background-color: #F2F4F5;
        }
        .aui-content{
            margin-top: 25px;
        }
        .aui-list{
            background-color: transparent;
        }
        .aui-list-item{
            background-color: #fff;
            margin-bottom: 15px !important;
        }
        #input-vercode{
            width: 100px;
            margin-right: 100px;
            float: left;
            position: relative;
        }
        .register-vercode-btn{
            background-image: linear-gradient(to right, #81B846, #81B846);
            right: 15px;
            color: #fff;
            padding: 7px 7px;
            position: absolute;
            border-radius: 6px;
            margin-top: 4px;
            font-size: 0.7rem;
            box-shadow: 0 5px 5px rgba(129,184,70, 0.3);
            transition: all .3s;
        }

        .register-vercode-btn:active{
            background-image: linear-gradient(to right, #81B846, #81B846);
            transform:scale(0.9);
            transition: all .05s;
        }
    </style>
</head>
<body>
    <div class="aui-content">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item" style="margin-bottom: 0 !important;">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        手机
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" placeholder="请输入您的手机号码" pattern="\d*">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        验证码
                    </div>
                    <div class="aui-list-item-input">
                        <input id="input-vercode" type="number" placeholder="手机验证码" pattern="\d*">
                        <div class="register-vercode-btn" tapmode onclick="vercodeOnclick()">获取验证码</div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        新密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="请输入重置后的新密码">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }

    function vercodeOnclick(){
        if($(".register-vercode-btn").text() != "获取验证码"){
            return;
        }
        vercodeEnable(false);
        $(".register-vercode-btn").text("获取验证码(60)");
        startVercodeTiming();
    }

    function vercodeEnable(enable){
        if(typeof enable == "undefined"){
            enable = true;
        }
        if(enable){
            $(".register-vercode-btn").css("background-image","linear-gradient(to right, #FD7754, #F89951)");
            $(".register-vercode-btn:active").css("background-image","linear-gradient(to right, #FD9D84, #F8B27E)");
            $(".register-vercode-btn").css("box-shadow","0 5px 5px rgba(250,138,82,0.2)");
        }else{
            $(".register-vercode-btn").css("background-image","linear-gradient(to right, #D1D1D1, #E0E0E0)")
            $(".register-vercode-btn:active").css("background-image","linear-gradient(to right, #D1D1D1, #E0E0E0)")
            $(".register-vercode-btn").css("box-shadow","0 5px 5px rgba(0,0,0,0.05)");
        }
    }

    function startVercodeTiming(){
        var timeLeft = 60;
        var intId = 0;
        intId = setInterval(function(){
            timeLeft = timeLeft - 1;
            if(timeLeft==0){
                $(".register-vercode-btn").text("获取验证码");
                vercodeEnable();
                clearInterval(intId);
                return;
            }
            $(".register-vercode-btn").text("获取验证码("+timeLeft+")");
        }, 1000);
    }

</script>
</html>
